<template>
	<view>
		<form @submit="form_submit" class="form-container">
			<view class="padding-main oh">
				<view class="border-radius-main bg-white spacing-mb oh">
					<view class="form-gorup">
						<view class="flex-row jc-sb align-c br-b-f5 padding-bottom-sm">
							<image src="/static/accountSets/setName.png" class="icon_s margin-right-lg"></image>
							<view class="form-gorup-title">账套名称</view>
							<input type="text" name="name" :value="form.name || ''" maxlength="16"
								placeholder-class="cr-grey-9" class="cr-base flex-1 flex-width margin-left-lg"
								placeholder="请输入账套名称" />
						</view>
						<view class="flex-row jc-sb align-c br-b-f5 padding-top-sm">
							<image src="/static/accountSets/setMan.png" class="icon_s margin-right-lg"></image>
							<view class="form-gorup-title">制    单    人</view>
							<input type="text" name="crateName" :value="form.crateName || ''" maxlength="30"
								placeholder-class="cr-grey-9" class="cr-base flex-1 flex-width margin-left-lg"
								placeholder="请输入制单人" />
						</view>
						<view class="flex-row jc-sb align-c br-b-f5 padding-top-sm">
							<image src="/static/accountSets/set.png" class="icon_s margin-right-lg"></image>
							<view class="form-gorup-title">会计制度</view>
							<picker @change="bindPickerChange" class="cr-base flex-1 flex-width margin-left-lg"
								:value="index" :range="array">
								<view>{{array[index]}}</view>
							</picker>
						</view>
						<view class="flex-row jc-sb align-c br-b-f5 padding-top-sm">
							<image src="/static/accountSets/setDate.png" class="icon_s margin-right-lg"></image>
							<view class="form-gorup-title">启用期间</view>
							<picker mode="date" :value="date" :start="startDate" :end="endDate" fields="month"
								@change="bindDateChange" class="cr-base flex-1 flex-width margin-left-lg">
								<view class="uni-input">{{date}}</view>
							</picker>
						</view>
					</view>
				</view>
				<!-- 底部操作 -->
				<view class="bottom-fixed btn-bottom bg-white">
					<view class="oh bottom-line-exclude">
						<button class="cr-white round text-size" type="default" form-type="submit" hover-class="none"
							:disabled="form_submit_disabled_status" :style="btnBgColor">保存</button>
					</view>
				</view>
			</view>
		</form>
	</view>
</template>

<script>
	const app = getApp();

	const theme_color = app.globalData.get_theme_color();
	const theme_color_light = app.globalData.get_theme_color(null, true);
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				btnBgColor: 'background:linear-gradient(107deg, ' + theme_color_light + ' 0%, ' + theme_color + ' 100%)',
				array: ['2013年小企业会计准则', '2014年小企业会计准则', '2015年小企业会计准则'],
				form: {
					id: '',
					name: '',
					crateName: '',
				},
				index: 0,
				date: currentDate,
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad(params) {},
		methods: {
			bindPickerChange(e) {
				this.index = e.detail.value
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				return `${year}年${month}月`;
			},
			// 数据提交
			form_submit(e) {
				// 表单数据
				var form_data = e.detail.value;
				// 数据校验
				var validation = [{
						fields: 'contacts',
						msg: '收货人不能为空'
					},
					{
						fields: 'phone',
						msg: '电话号码不能为空'
					},
					{
						fields: 'address',
						msg: '地址不能为空'
					},
				];
				uni.switchTab({
					url: '/pages/home/home'
				})
			},
		}
	}
</script>

<style>
.icon_s{
	width: 40rpx;
	height: 40rpx;
}
</style>